<template>
  <div>
    <nav-header title="注册"></nav-header>
    <!-- 表单 -->
    <div class="nexts">
      <div class="tel">
        <span>
          <select name="" id="" class="tel1">
            <option value="">+86</option>
          </select>
        </span>
        <input type="tel" name="" id="username" placeholder="请输入你的电话号码" @blur="animate()" />
      </div>
      <div class="tele">
        <input type="tel" placeholder="请输入你的验证码" id="vercode" min="0" max="11" />
        <!-- / 1 [3,4,5,7,8] [0-9] {9}$/ -->
        <div class="btn" :class="{ disabled: !this.canClick }" @click="getYanzheng()">
          {{ content }}
        </div>
      </div>
      <div class="password">
        <span class="inp inp01">
          <input :type="type" name="" id="password1" placeholder="请输入你的密码" />
          <div class="eyes" @click="flag = !flag">
            <van-icon :name="elIcon" size="25px" />
          </div>
        </span>
      </div>
      <!-- plan01 -->
      <div class="password">
        <span class="inp inp01">
          <input :type="passwordType" name="" id="password2" placeholder="请确认你的密码" />
          <div class="eyes" @click="switchPasswordType">
            <van-icon name="eye" size="25px" v-if="passwordType === 'text'" />
            <van-icon name="closed-eye" size="25px" v-if="passwordType === 'password'" />
          </div>
        </span>
      </div>
    </div>
    <div class="bt">
      <div class="login" @click="regId()">注册</div>
    </div>
    <div class="login">
      已有账号，去<router-link class="p" to="/login">登录</router-link>
    </div>
  </div>
</template>

<script>
import NavHeader from "../components/Nav-Header.vue";

export default {
  components: { NavHeader },
  name: "App03Reg",
  data() {
    return {
      content: "发送验证码",
      totalTime: 30,
      canClick: true,
      flag: false,
      passwordType: "password",
    };
  },
  computed: {
    type() {
      return this.flag ? "text" : "password";
    },
    elIcon() {
      return this.flag ? "eye" : "closed-eye";
    },
  },
  mounted() { },

  methods: {
    animate() {
      var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      let str = document.getElementById('username').value
      // console.log(re.test(str))
      if (re.test(str) == false) {
        this.$toast('抱歉手机号不合法!请重新输入！')
      }
    },
    getYanzheng() {
      if (!this.canClick) return;
      this.canClick = false;
      this.content = this.totalTime + "s后重新发送";
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.content = "重新发送验证码";
          this.totalTime = 10;
          this.canClick = true;
        }
      }, 1000);

      let username = document.getElementById('username').value
      this.$axios.post('/user/sendSms', {
        mobile: username, type: 'register'
      })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            console.log(res)
            this.$toast('发送成功！')
          } else if (res.code == 1) {
            this.$router.push('/login')
          } else {
            setTimeout(() => {
              this.$toast(res.msg)
            }, 2000)
          }
        })
    },
    switchPasswordType() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },
    regId() {
      console.log('dianjil')
      let password1 = document.getElementById('password1').value
      let password2 = document.getElementById('password2').value
      let password = password1 == password2 ? password1 || password2 : this.$toast('两次密码不一致！')
      let username = document.getElementById('username').value
      let vercode = document.getElementById('vercode').value

      this.$axios.post('/user/reg', {
        username, password, vercode
      })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.$toast('注册成功！请登录！')
            this.$router.push('/login')
          } else {
            this.$toast(res.msg)
          }
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.nexts {
  width: 100%;

  .tel {
    width: 95%;
    height: 30px;
    display: flex;
    border-bottom: 1px solid rgb(204, 204, 204);
    margin: 25px auto 0;

    span {
      display: block;
      width: 15%;
      height: 30px;

      // margin-left: 10px;
      .tel1 {
        width: 100%;
        height: 30px;
        border: none;
        font-size: 20px;
        color: grey;

        option {
          width: 100%;
          height: 50px;
          // font-size: 18px;
        }
      }
    }

    input {
      height: 6.733333vw;
      line-height: 30px;
      margin-left: 15px;
    }
  }

  .tele {
    // margin-top: 30px;
    display: flex;
    justify-content: space-between;
    width: 95%;
    height: 30px;
    border-bottom: 1px solid rgb(204, 204, 204);
    padding-bottom: 10px;
    margin: 30px auto 0;

    input {
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      // margin-left: 15px;
    }

    .btn {
      width: 100px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 10px;
      color: #07c160;
      border: 1px solid #07c160;
      border-radius: 20px;
      margin-right: 15px;
    }

    .disabled {
      background-color: rgb(223, 223, 223);
      border-color: #07c160;
      color: #07c160;
      // cursor: not-allowed; // 鼠标变化
    }
  }

  .password {
    width: 95%;
    height: 50px;
    border-bottom: 1px solid rgb(204, 204, 204);
    padding-bottom: 10px;
    // text-align: center;
    position: relative;
    margin: auto;
    display: flex;
    justify-content: space-between;

    input {
      height: 50px;
      font-size: 16px;
      line-height: 50px;
      // margin-left: 15px;
    }

    p {
      color: coral;
      font-size: 15px;
      line-height: 50px;
      margin-right: 10px;
    }

    .inp01 {
      display: flex;

      .eyes {
        position: absolute;
        right: 10px;
        top: 20px;
      }
    }
  }
}

.bt {
  width: 100%;
  text-align: center;
  margin-top: 100px;

  .login {
    width: 80%;
    height: 40px;
    background-color: #07c160;
    color: white;
    margin: auto;
    line-height: 40px;
    border-radius: 30px;
  }
}

.login {
  width: 100%;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 40px;

  .p {
    color: #07c160;
  }
}
</style>